<!DOCTYPE html>
<html>
<head>
<include file="Include:meta" />
<title>添加用户-目的地运营集团数据管理平台</title>
<include file="Include:style" />
<style type="text/css">
.checkbox-item label{margin:0 10px 0 0!important;}
#selectuser-modal li{ width:auto; margin-right: 15px; }
</style>
</head>
<body>
<include file="Include:header" />
<include file="Include:left" />
<div id="main">
	<div class="crumbs">
		<div class="crumbs-text">用户列表 > 添加用户</div>
	</div>
	<div id="content">
		<form action="__APP__/System/user_list_add" method="post" name="number_validate" id="password_validate" novalidate="novalidate" />
			<input type="hidden" name="action" value="add">
			<div class="form-main flabel-6">
				<div class="form-title">添加用户</div>
				<div class="form-item">
					<div class="input-label"><span class="asterisk">*</span>姓名</div>
					<div class="input-item">
						<input type="text" name="username" class="form-control required-text" autocomplete="off">
						<span class="error-item">必填项</span>
						<div class="input-prompt"><i class="glyphicon glyphicon-exclamation-sign"></i> 提交后无法更改</strong></div>
					</div>
				</div>
				<div class="form-item">
					<div class="input-label"><span class="asterisk">*</span>姓名拼音</div>
					<div class="input-item">
						<input type="text" name="spell" class="form-control required-text" autocomplete="off">
						<span class="error-item">必填项</span>
						<span class="error-item">只能填写小写拼音</span>
					</div>
				</div>
				<div class="form-item">
					<div class="input-label"><span class="asterisk">*</span>登录用户名</div>
					<div class="input-item">
						<input type="text" name="regname" class="form-control required-text" autocomplete="off">
						<span class="error-item">必填项</span>
						<span class="error-item">长度只能在2-20个字符之间</span>
						<span class="error-item">格式错误，仅支持汉字、字母、数字、“-”“_”的组合</span>
						<div class="input-prompt"><i class="glyphicon glyphicon-exclamation-sign"></i> 支持中文、字母、数字、“-”“_”的组合，2-20个字符</div>
					</div>
				</div>
				<div class="form-item">
					<div class="input-label"><span class="asterisk">*</span>密码</div>
					<div class="input-item">
						<input type="password" name="password" class="form-control" maxlength="20" autocomplete="off">
						<span class="error-item">必填项</span>
						<span class="error-item">不能含有空格</span>
						<span class="error-item">长度只能在6-20个字符之间</span>
						<div class="input-prompt"><i class="glyphicon glyphicon-exclamation-sign"></i> 6-20个字符</div>
					</div>
				</div>
				<div class="form-item">
					<div class="input-label"><span class="asterisk">*</span>所属中心</div>
					<div class="input-item">
						<select name="center_id" class="form-control select-add" autocomplete="off">
							<option value="-10" selected>请选择</option>
							<foreach name="center_list" item="vo">
								<option value="{$vo['id']}">{$vo['first_name']}</option>
							</foreach>
						</select>
						<input type="text" name="center_id_input" class="form-control select-add-text ml5" autocomplete="off">
						<span class="error-item">必填项</span>
						<span class="error-item">该中心已存在</span>
					</div>
				</div>
				<div class="form-item">
					<div class="input-label"><span class="asterisk">*</span>部门</div>
					<div class="input-item">
						<select name="department_id" class="form-control select-add" autocomplete="off">
							<option value="-10" selected>请先选择所属中心</option>
						</select>
						<input type="text" name="department_id_input" class="form-control select-add-text ml5" autocomplete="off">
						<span class="error-item">必填项</span>
						<span class="error-item">该部门已存在</span>
					</div>
				</div>
				<volist name="result4" id="vo" key="k">
					<div class="form-item">
						<div class="input-label"><span class="asterisk">*</span>{$vo['first_name']}</div>
						<div class="input-item">
							<select name="position_types{$k}[val][]" class="form-control select-add" autocomplete="off">
								<option value="-10">请选择</option>
								<volist name="vo['second']" id="wo">
									<option value="{$wo['id']}">{$wo['second_name']}</option>
								</volist>
							</select>
							<input type="text" name="position_types{$k}[name]" class="form-control select-add-text ml5" autocomplete="off">
							<span class="error-item">必填项</span>
							<span class="error-item">该{$vo['first_name']}已存在</span>
							<input type="hidden" name="position_types{$k}[first_id]" value="{$vo['id']}">
						</div>
					</div>
				</volist>
				<volist name="result5" id="vo" key="k">
					<div class="form-item">
						<div class="input-label"><span class="asterisk">*</span>{$vo['first_name']}</div>
						<div class="input-item">
							<select name="rank_types{$k}[val][]" class="form-control select-add2" autocomplete="off">
								<option value="-10">请选择</option>
								<volist name="vo['second']" id="wo">
									<option value="{$wo['id']}">{$wo['second_name']}</option>
								</volist>
							</select>
							<span class="error-item">必填项</span>
							<input type="hidden" name="rank_types{$k}[first_id]" value="{$vo['id']}">
						</div>
					</div>
				</volist>
				<div class="form-item">
					<div class="input-label"><span class="asterisk">*</span>权限包</div>
					<div class="input-item">
						<button type="button" class="is_all btn is_all_btn">选择权限包</button>
						<span class="error-item">请选择权限包</span>
						<div class="users-list"></div>
						<input type="hidden" name="permissions_id" class="uids-input" autocomplete="off">
						<input type="hidden" name="permissions_name" class="users-input" autocomplete="off">
					</div>
				</div>
				<div class="form-item">
					<div class="input-label">项目人员</div>
					<div class="input-item">
						<label class="checkbox-inline"><input type="checkbox" name="is_project" value="1" autocomplete="off"></label>
					</div>
				</div>
				<div class="form-item">
					<div class="input-label">手机号</div>
					<div class="input-item">
						<input type="text" class="form-control" name="mobilephone" maxlength="11" autocomplete="off">
						<span class="error-item">请填写正确的手机号</span>
					</div>
				</div>
				<div class="form-item">
					<div class="input-label">邮箱</div>
					<div class="input-item">
						<input type="text" class="form-control" name="email" autocomplete="off">
						<span class="error-item">请填写正确的邮箱</span>
					</div>
				</div>
				<div class="form-item">
					<div class="input-label">员工号</div>
					<div class="input-item">
						<input type="text" class="form-control" name="user_number" autocomplete="off">
						<span class="error-item">不能含有中文或特殊符号</span>
					</div>
				</div>
			</div>
			<div class="form-btn-item"><button class="btn btn-submit" type="submit">提交</button><button class="btn btn-default js_back1" type="button">返回</button></div>
		</form>
	</div>
</div>
<!--选择用户-->
<div class="modal fade" id="selectuser-modal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4>选择权限包</h4>
				<i class="fa fa-times" aria-hidden="true" data-dismiss="modal"></i>
			</div>
			<div class="modal-body">
				<foreach name="permissions" item="do">
					<div class="department">
						<label><input class="department-checkbox" type="checkbox" autocomplete="off" />{$do['name']}</label>
					</div>
					<ul>
						<foreach name="do['permissions']" item="uo">
							<li>
								<label data-toggle="tooltip" data-placement="right" title="" data-original-title="{$uo['remark']}"><input class="user-checkbox" type="checkbox" value="{$uo['id']}" <if condition="$uo['cho'] eq 1">onclick="return false;"</if> autocomplete="off" />{$uo['permissions_name']}</label>
							</li>
						</foreach>
					</ul>
				</foreach>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn user-affirm">确认</button><button type="button" class="btn btn-default user-cancel" data-dismiss="modal">取消</button>
			</div>
		</div>
	</div>
</div>
<include file="Include:javascript" />
<script type="text/javascript">
$(function() {
	//返回
	$(".js_back1").click(function(){
		document.location.href="__APP__/System/user_list/username/{$username}/department_id/{$department_id}/position/{$position}/time_id/{$time_id}/permissions_id/{$permissions_id}/user_number/{$user_number}/status/{$status}&p={$page}";
	});

	//权限包
	$(".is_all").click(function(){
		$("#selectuser-modal").modal("show");
	});
	
	//添加职位多选框
	$('.label-add-btn').on('click',function(){
		var input = $(this).prevAll(".label-add-text").eq(0),
			item = input.prev(".checkbox-item"),
			val = input.val(),
			tag = true;
		input.nextAll(".error-item").eq(1).hide();
		if(val=="" || /^\s+$/.test(val)){
			input.nextAll(".error-item").eq(0).show();
			tag = false;
		}else{
			item.find(".checkbox-inline").each(function(){
				if($(this).text()==val){
					input.nextAll(".error-item").eq(2).show();
					tag = false;
					return false;
				}
			});
		}
		
		if(tag){
			var first_id = $(this).attr("first_id"),
				label = item.find(".checkbox-inline:last"),
				name = label.find(":checkbox").attr("name");
			$.ajax({
				type:"POST",
				async:false,
				dataType:"json",
				data:{"type_name":val,"first_id":first_id},
				url:"__APP__/Index/label_add_ajax",
				success:function(data){
					if(data.id){
						input.val("");
						item.find(".error-item").hide();
						var html = "<label class='checkbox-inline'><input type='checkbox' name="+name+" value="+data.id+" checked autocomplete='off'>"+data.name+"</label>";
						label.after(html);
					}
				}
			});
		}
	});
	
	//表单验证
	$(".btn-submit").click(function(e){
		var tag = false;
		
		$(".required-text").each(function(){
			if($(this).val()==""){
				$(this).next(".error-item").eq(0).show();
				tag = true;
			}
		});
		$("[name='regname']").each(function(){
			var $val = $(this).val();
			if($val==""){
				$(this).nextAll(".error-item").eq(0).show();
				tag = true;
			}else if($val.length<2){
				$(this).nextAll(".error-item").eq(1).show();
				tag = true;
			}else if(!/^[\u4E00-\u9FA5A-Za-z0-9_-]+$/.test($val)){
				$(this).nextAll(".error-item").eq(2).show();
				tag = true;
			}
		});
		$("[name='password']").each(function(){
			var $val = $(this).val();

			if($(this).val()==""){
				$(this).nextAll(".error-item").eq(0).show();
				tag = true;
			}else if(/\s/.test($val)){
				$(this).nextAll(".error-item").eq(1).show();
				tag = true;
			}else if($val.length<6){
				$(this).nextAll(".error-item").eq(2).show();
				tag = true;
			}
		});
		$("[name='spell']").each(function(){
			var $val = $(this).val();

			if($(this).val()!="" && !/^[a-z]+$/.test($val)){
				$(this).nextAll(".error-item").eq(1).show();
				tag = true;
			}
		});
		$("[name='user_number']").each(function(){
			var $val = $(this).val();

			if($(this).val()!="" && /[\u4e00-\u9fa5]+|\s+/g.test($val)){
				$(this).next(".error-item").show();
				tag = true;
			}
		});
		$("[name='mobilephone']").each(function(){
			var $val = $(this).val();
			
			if($val!="" && !/^1[3|4|5|7|8]\d{9}$/.test($val)){
				$(this).next(".error-item").show();
				tag = true;
			}
		});
		$("[name='email']").each(function(){
			var $val = $(this).val();
			
			if($val!="" && !/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test($val)){
				$(this).next(".error-item").show();
				tag = true;
			}
		});
		$("select.required-selt").each(function(){
			var $val = $(this).val();
			
			if($val==-10){
				$(this).nextAll(".error-item").eq(0).show();
				tag = true;
			}
		});
		$("[name='department_text']").each(function(){
			var $val = $(this).val();
			
			if($val!="" && /^\d+$/.test($val)){
				$(this).nextAll(".error-item").eq(1).show();
				tag = true;
			}
		});
		$("select.select-add").each(function(){
			var $this = $(this),
				val = $this.val(),
				text = $this.nextAll(".select-add-text").val();
			if(val==-10 && (text=="" || /^\s+$/.test(text))){
				$this.nextAll(".error-item").eq(0).show();
				tag = true;
			}else{
				$this.find("option").each(function(){
					if($(this).text()==text){
						$this.nextAll(".error-item").eq(1).show()
						tag = true;
						return false;
					}
				});
			}
		});
		$("select.select-add2").each(function(){
			var $this = $(this),
				val = $this.val(),
				text = $this.nextAll(".select-add-text").val();
			if(val==-10){
				$this.nextAll(".error-item").eq(0).show();
				tag = true;
			}
		});
		$(".checkbox-item").each(function(){
			if($(this).find(":checkbox:checked").length==0){
				$(this).find(".error-item").show();
				tag = true;
			}
		});
		$(".label-add-text").each(function(){
			$val = $(this).val();
			if($val!=""){
				$(this).nextAll(".error-item").eq(1).show();
				tag = true;
			}
		});
		if($("[name='permissions_name']").val()==""){
			$(".is_all").next(".error-item").show();
			tag = true;
		}
		
		if(tag){
			return false;
		}
	});
	
	//隐藏错误提示
	$(".required-text,[name='mobilephone'],[name='email'],[name='user_number'],[name='email'],[name='password'],[name='regname'],.select-add-text,.label-add-text").focus(function(){
		$(this).nextAll(".error-item").hide();
	});
	$(".checkbox-item").on('click',":checkbox",function(){
		$(this).parents(".checkbox-item").find(".error-item").hide();
	});
	$("select.required-selt").change(function(){
		$(this).nextAll(".error-item").hide();
	});
	$(".is_all_btn").click(function(){
		$(this).siblings(".error-item").hide();
	});
	
	var $usermodal = $("#selectuser-modal"),
		$userbody = $usermodal.find(".modal-body");

	//遍历选中用户
	$usermodal.on("show.bs.modal",function(){
		var $checkeduser = $(".users-input").val();
		if($checkeduser!=""){
			$checkeduser = $checkeduser.split(",");
			$(this).find(".user-checkbox").each(function(){
				var $user = $(this).parent("label").text();
				for(var i=0;i<$checkeduser.length;i++){
					if($user==$checkeduser[i]){
						$(this).prop("checked",true);
					}
				}
			});
		}
	});

	//滚动条返回顶部
	$usermodal.on("shown.bs.modal",function(){
		$(this).scrollTop(0);
	});

	//用户全选
	$('body').on("click",".all-checkbox",function(){
		if($(this).prop("checked")){
			$usermodal.find(".user-checkbox:enabled,.department-checkbox").prop("checked",true);
		}else{
			$usermodal.find(".user-checkbox:enabled,.department-checkbox").prop("checked",false);
		}
	});

	//部门全选
	$('body').on("click",".department-checkbox",function(){
		var $ul = $(this).parents(".department").next("ul");
		if($(this).prop("checked")){
			$ul.find(".user-checkbox:enabled").prop("checked",true);
		}else{
			$ul.find(".user-checkbox:enabled").prop("checked",false);
			$usermodal.find(".all-checkbox").prop("checked",false);
		}
	});

	//用户单选
	$('body').on("click",".user-checkbox",function(){
		if(!$(this).prop("checked")){
			$(this).parents("ul").prev(".department").find(".department-checkbox").prop("checked",false);
			$usermodal.find(".all-checkbox").prop("checked",false);
		}
	});

	//确定选择用户
	$('body').on("click",".user-affirm",function(){
		var $usersub = false;
		$usermodal.find(".user-checkbox").each(function(){
			if($(this).prop("checked")){
				$usersub = true;
				return false;
			}
		});
		if($usersub){
			var $users = "",
				$uids = "";
			$usermodal.find(".user-checkbox").each(function(){
				if($(this).prop("checked")){
					$users += $(this).parent("label").text()+",";
					$uids += $(this).val()+",";
				}
			}); 
			
			$users = $users.replace(/\,$/,"");
			$uids = $uids.replace(/\,$/,"");
			$(".users-list").html("<strong>已选权限包：</strong>"+$users);
			$(".users-input").val($users);
			$(".uids-input").val($uids);
			$usermodal.modal("hide");
		}else{
			$("body").append("<div class='success-defeated hide'>至少选择一项权限包</div>");
		    var defeated = $(".success-defeated"),
		    	t = -defeated.outerHeight()/2,
		        l = -defeated.outerWidth()/2;
		   	defeated.css({"margin-top":t,"margin-left":l}).slideDown();
		    setTimeout(function(){
		    	defeated.remove();
		    },2000);
		}
	});

	//取消选择用户
	$usermodal.on("hidden.bs.modal",function(){
		$(this).find(":checkbox").prop("checked",false);
	});
});
</script>
</body>
</html>